<template>
  <a-spin :spinning="loading">
    <a-form
      layout="inline"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-form-item label="">
        <a-input
          style="width: 200px"
          placeholder="请输入搜索内容"
          v-model:value="pageable.searchContent"
          allowClear
        />
      </a-form-item>
      <a-form-item label="">
        <a-select
          placeholder="请选择状态"
          v-model:value="pageable.status"
          style="width: 120px"
          allowClear
        >
          <a-select-option
            v-for="(item, idx) in statusOpts"
            :key="idx"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="">
        <a-select
          placeholder="请选择所属分组"
          v-model:value="pageable.group"
          style="width: 180px"
          allowClear
        >
          <a-select-option
            v-for="(item, idx) in groupKeyOpts"
            :key="idx"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch" html-type="submit">
          搜索
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="addNew" html-type="submit">
          新增
        </a-button>
      </a-form-item>
    </a-form>

    <!-- table start -->
    <a-table
      rowKey="id"
      :defaultExpandAllRows="true"
      :columns="columns"
      :style="{ marginTop: '20px' }"
      :data-source="data"
      :pagination="pageable"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'num'">
          <template v-if="record.num == 0">若干人</template>
          <template v-else>{{ record.num }}</template>
        </template>
        <template v-if="column.key == 'status'">
          <a-select
            v-model:value="record.status"
            style="width: 120px"
            @change="handleRowStatusChange"
          >
            <a-select-option
              v-for="(item, idx) in statusOpts"
              :key="idx"
              :row="record"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </template>
        <template v-if="column.key == 'actions'">
          <a-button type="link" @click="edit(record.tagId)">修改 </a-button>
          <a-button type="link" @click="del(record)">删除 </a-button>
        </template>
      </template>
    </a-table>
    <!-- table end -->
    <AddModal ref="addModal" @refreshTable="handleSearch" />
    <EditModal ref="editModal" @refreshTable="handleSearch" />
  </a-spin>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import ResultEnum from "@/config/ResultEnum";
import {
  tableCols,
  loadTable,
  statusOptions,
  changeStatus,
  getTagGroupKeys,
  submitDel,
} from "./index";
import AddModal from "./../addModal/index.vue";
import EditModal from "./../editModal/index.vue";
import request from "@/request";
import { confirm } from "@/utils/common";

export default defineComponent({
  components: {
    AddModal,
    EditModal,
  },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const addModal = ref();
    const editModal = ref();
    const data = ref([] as any);
    const columns = ref(tableCols);
    const statusOpts = ref(statusOptions);
    const groupKeyOpts = ref([] as any);

    const pageable = ref({
      pageSize: 10,
      current: 1,
      total: 0,
      status: null,
      group: null,
      searchContent: "",
      showTotal(total: any, range: any) {
        return "共" + total + "条数据";
      },
    });

    onMounted(() => {
      getTagGroupKeys().then((res: any) => {
        groupKeyOpts.value = res;
        loadData();
      });
    });

    const handleSearch = () => {
      pageable.value.current = 1;
      pageable.value.total = 0;
      loadData();
    };

    const loadData = () => {
      loading.value = true;
      loadTable({
        page: pageable.value.current,
        limit: pageable.value.pageSize,
        searchContent: pageable.value.searchContent,
        group: pageable.value.group,
        status: pageable.value.status,
      }).then((res: any) => {
        loading.value = false;
        if (res.code == ResultEnum.SUCCESS_CODE) {
          let records = res.result.records;
          if (records && records.length > 0) {
            let index = 1;
            for (let item of records) {
              item.idx = index;
              item.statusObj = renderStatus(item.status);
              item.groupKeyTxt = renderGroup(item.groupKey);
              index++;
            }
          }
          data.value = records;
          pageable.value.total = parseInt(res.result.total);
        } else {
          message.error("数据获取失败");
        }
      });
    };

    const renderGroup = (key: string) => {
      for (let item of groupKeyOpts.value) {
        if (key == item.value) {
          return item.label;
        }
      }
    };

    const renderStatus = (status: string) => {
      for (let item of statusOpts.value) {
        if (status == item.value) {
          return {
            label: item.label,
            color: item.color,
          };
        }
      }
    };

    //删除
    const del = (record: any) => {
      confirm(
        "确认",
        "删除【" + record.tagLabel + "】?",
        function () {
          submitDel(record.tagId).then((res: any) => {
            if (res.code == ResultEnum.SUCCESS_CODE) {
              message.success("删除成功");
              handleSearch();
            } else {
              message.error(res.message);
            }
          });
        },
        function () {}
      );
    };

    const addNew = () => {
      addModal.value.display();
    };

    const edit = (id: string) => {
      editModal.value.display(id);
    };

    const handleRowStatusChange = (value: string, option: any) => {
      loading.value = true;
      changeStatus(option.row.tagId, value).then((res: any) => {
        loading.value = false;
        if (res.code == ResultEnum.SUCCESS_CODE) {
          message.success("修改成功");
        } else {
          message.error("修改失败");
        }
      });
    };

    const handleTableChange = (pagination: any, filters: any, sorter: any) => {
      pageable.value.current = pagination.current;
      loadData();
    };

    return {
      loading,
      handleSearch,
      addNew,
      columns,
      data,
      addModal,
      editModal,
      handleRowStatusChange,
      statusOpts,
      edit,
      pageable,
      groupKeyOpts,
      del,
      handleTableChange,
    };
  },
});
</script>
